<template>
    <div id="specialty">
        <v-nav></v-nav>
        <div class="newProductListWrapper">
            <section>
                <mt-loadmore  :top-method="loadTop" :bottom-method="loadBottom" :bottom-all-loaded="allLoaded" ref="loadmore"  :topDistance="20" :bottomDistance="20" :topPullText="topPullText" :topDropText="topDropText" :bottomPullText="bottomPullText" :auto-fill="false">
                    <div :class="y%2==0?'newProductList flo-l':'newProductList flo-r'" v-for="(x,y) in proGroup" :id="x.pro_id" :type="x.id_type" @click="goNewDetail($event)" :key="y">
                        <header>
                            <dl>
                                <dd><img :src="x.pro_img"></dd>
                                <dt style="text-align: left">{{x.subtitle}}</dt>
                            </dl>
                        </header>
                        <footer>
                            <div>
								<span class="flo-l" style="line-height: .4rem;">
									<span class="priceColor" style="font-size:.34rem;">
										<span class="priceColor flo-l" style="font-size:.24rem;">￥</span>
										{{x.pro_price}}
									</span>
								</span>
                                <span class="flo-r" style="color:#969696;">已砍{{x.pro_sells}}件</span>
                            </div>
                        </footer>
                    </div>
                </mt-loadmore>
                <span v-if="lookMore" style="font-size: .26rem;color: #969696;text-align: center;display: block;">下拉查看更多</span>
            </section>
        </div>
    </div>
</template>

<script>
    import store from "../../store/newStore.js";
    import Nav from "../nav.vue";
    import config from "../../config/config.js";
    import share from "../../share/share.js";
    import MtaH5 from 'mta-h5-analysis';
    export default{
        components:{
            "v-nav":Nav
        },
        data(){
            return{
                proGroup:[],
                allLoaded:Boolean,
                topPullText:'',
                bottomPullText:'',
                topDropText:'下拉刷新',
                pageSize:1,
              lookMore:false
            }
        },
        methods:{
            goNewDetail($event){
                var proId=$event.currentTarget.getAttribute('id'),
                    type=$event.currentTarget.getAttribute('type');
                this.$router.push('/newDetail/'+proId+''+'/'+type);
            },
            getData(pageSize){
                var id=this.$route.params.id;
                var value=JSON.stringify({"page":pageSize,"id":id,"token":localStorage.getItem('token')}),
                    key=demo(value);
                axios.post('/Home/home/HomeIndex',{
                    value:value,
                    key:key
                },config)
                    .then(function(response) {
                        if(pageSize==1){
                            this.proGroup=response.data.data.proGroup.data;
                        }else{
                            this.proGroup=this.proGroup.concat(response.data.data.proGroup.data);
                        }
                        this.$store.commit('increment',response.data.ticket);
                        if(response.data.data.proGroup.pageNum==pageSize){
                            this.$nextTick(function(){
                                this.allLoaded=true;
                              this.lookMore=false;
                            })

                        }else{
                            this.$nextTick(function(){
                                this.allLoaded=false;
                              this.lookMore=true;
                            })

                        }
                    }.bind(this))
                    .catch(function (error) {
                        console.log(error);
                    });
                share({})
            },
            // loadTop() {
            //     var self = this;
            //     self.pageSize=1;
            //     setTimeout(function () {
            //         self.getData(self.pageSize);
            //         self.$refs.loadmore.onTopLoaded();
            //     }, 500);
            // },
            loadBottom(){
                var self = this;
              self.lookMore = false;
                setTimeout(function () {
                    self.pageSize++;
                    self.getData(self.pageSize);
                    self.$refs.loadmore.onBottomLoaded();
                }, 500);
            },
            scrollEvent(e) {
                sessionStorage.setItem('specialtyTop', e.target.scrollTop);
            }
        },
        activated(){
            var that = this;
            document.getElementById('home').addEventListener('scroll', this.scrollEvent)
            if (sessionStorage.getItem('specialtyTop')) {
                document.getElementById('home').scrollTop = sessionStorage.getItem('specialtyTop');
            }
            this.getData(this.pageSize);
            share({});
            MtaH5.init({
                "sid":'500594815',
                "cid":'500595819',
                "autoReport":0,
                "senseHash":0,
                "senseQuery":0,
                "performanceMonitor":0,
                "ignoreParams":[]
            });
            MtaH5.pgv();
        },
        deactivated () {
            document.getElementById('home').removeEventListener('scroll', this.scrollEvent);
        },
        beforeDestroy () {
            document.getElementById('home').removeEventListener('scroll', this.scrollEvent);
        }
    }
</script>
<style>
</style>